<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>抖音</title>
<style>
body{
  margin: 0;
}
.wrap{
  width: 1110px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
video{
  width: 760px;
  height: 516px;
  background: #000;
}
.video-right{
  width: 320px;
}
.cover{
  height: 136px;
}
.list-text{
  display: inline-block;
  width: 210px;
}
.avatar{
  width: 40px;
  border-radius: 50%;
}
.list-box{
  display: flex;
  justify-content: space-between;
}
.avatar-text{
  height: 40px;
  line-height: 40px;
  display: inline-block;
  vertical-align: top;
  margin-left: 8px;
}
.desc{
  color: #999;
  font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
  <div>
    <input type="text">
    <button>获取验证码</button>
  </div>
  <div class="wrap">
  <video :src="src" controls loop autoplay></video>
  <div class="video-right">
    <div class="list-box" v-for="_ in aweme_list">
      <img class="cover" @click="play(_.video.play_addr.url_list[0])" :src="_.video.cover.url_list[0]" alt="">
      <div class="list-text">
      <img class="avatar" :src="_.author.avatar_168x168.url_list[0]" alt="">
      <span class="avatar-text" v-text="_.author.nickname"></span>
      <div class="desc" v-text="_.desc"></div>
    </div>
    </div>
  </div>
  </div>
  <button @click="getFeed">换一换</button>
  <div v-for="_ in recommendList">
    <img class="cover" @click="play(_.video.play_addr.url_list[0])" :src="_.video.cover.url_list[0]" alt="">
    <div class="list-text">
      <div v-text="_.desc"></div>
      <img class="avatar" :src="_.author.avatar_168x168.url_list[0]" alt="">
      <div v-text="_.author.nickname"></div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.0-rc.7/vue.global.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"></script> -->
<script>
  // 抖音版本7.5.0
  // 看到倒数第三个视频开始调feed接口获取推荐的视频
  // 因为视频地址是动态变化的，所以用node动态获取，其余的接口用nginx代理
  // X-Gorgon加密算法很复杂，待解决
	var options = {
    data(){
      return {
        aweme_list: [],
        recommendList: [],
        src: ''
      }
    },
    created(){
      this.getFavorite()
      this.getFeed()
    },
    methods:{
      get(url,time,Gorgon){
        return fetch(url,{headers:{'X-Gorgon':Gorgon,'X-Khronos':time}}).then(_=>_.json()).then(res=>res)
      },
      post(url,body){
        return fetch(url,{method:'post',body,headers:{'content-type':'application/x-www-form-urlencoded'}}).then(_=>_.json()).then(res=>res)
      },
      getCode(){
        this.post('/douyin/passport/mobile/send_code/v1/?account_sdk_version=362&os_api=22&device_type=MI%209&ssmix=a&manifest_version_code=750&dpi=320&js_sdk_version=1.19.2.0&uuid=863254140419226&app_name=aweme&version_name=7.5.0&ts=1598759749&app_type=normal&ac=wifi&update_version_code=7502&channel=wandoujia_aweme2&_rticket=1598759749793&device_platform=android&iid=1336613966450215&version_code=750&openudid=68f7288cc0fb1126&device_id=2867134149435767&resolution=900*1600&os_version=5.1.1&language=zh&device_brand=Xiaomi&aid=1128&mcc_mnc=46007','auto_read=0&account_sdk_source=app&mix_mode=1&type=3731&mobile=2e3d332534303c2530373434253c323433&unbind_exist=35').then(res=>{
          if(res.message==='success'){
            alert('发送成功')
          }else{
            alert(res.data.description)
          }
        })
      },
      login(){
        this.post('/douyin/passport/mobile/sms_login/?account_sdk_version=362&os_api=22&device_type=MI%209&ssmix=a&manifest_version_code=750&dpi=320&js_sdk_version=1.19.2.0&uuid=863254140419226&app_name=aweme&version_name=7.5.0&ts=1598764517&app_type=normal&ac=wifi&update_version_code=7502&channel=wandoujia_aweme2&_rticket=1598764518520&device_platform=android&iid=1336613966450215&version_code=750&openudid=68f7288cc0fb1126&device_id=2867134149435767&resolution=900*1600&os_version=5.1.1&language=zh&device_brand=Xiaomi&aid=1128&mcc_mnc=46007','mix_mode=1&mobile=2e3d332534303c2530373434253c323433&code=3231333c&account_sdk_source=app').then(res=>{
          if(res.message==='success'){
            alert('登录成功')
          }else{
            alert(res.data.description)
          }
        })
      },
      getFavorite(){
        var time = '1598851626116'
        var gorgon = '030057ab00007f5c382d52a6b59fc4d50e6dbf15ce9044760624'
        // var time = this.getTime()
        this.get(`/douyin/aweme/v1/aweme/favorite/?max_cursor=0&sec_user_id=MS4wLjABAAAAgMUq8bSAPFaS1-XF6iiYP5iT9kIe2KYiqUyxmGlPv4FrSrzC4oBlRovIvem8OJi_&count=20&retry_type=no_retry&iid=4010626588617199&device_id=3131013182011630&ac=wifi&channel=wandoujia_aweme2&aid=1128&app_name=aweme&version_code=750&version_name=7.5.0&device_platform=android&ssmix=a&device_type=MI+9&device_brand=Xiaomi&language=zh&os_api=22&os_version=5.1.1&uuid=863254979922019&openudid=fcedecb6260322e4&manifest_version_code=750&resolution=540*960&dpi=160&update_version_code=7502&_rticket=1598851626352&ts=1598851625&app_type=normal&js_sdk_version=1.19.4.16&mcc_mnc=46007`,time.slice(0,10),gorgon).then(res=>{
          this.aweme_list = res.aweme_list
        })
      },
      getFeed(){
        var time = '1598850798942'
        var gorgon = '030000004001685749deb68de0d8e806bfc5360690a63bb03ce5'
        var cookie = 'install_id=4010626588617199; ttreq=1$c1055d27c93c680b4a9a375037e9caa4436396a9; qh[360]=1; d_ticket=04c3a9db074d6fdefef866ce21fe2e46dd5ea; odin_tt=945af6b6983af7c212c605529eb86084f337ae7b7b8a3569039e3d8c391107c873bda5c9d12ddf80f51403ca82a8fc9a459200749ae3966bd9fe9e1188e954a6; sid_guard=07310b0ebca08fe6dac8561e07067b23%7C1598837777%7C5184000%7CFri%2C+30-Oct-2020+01%3A36%3A17+GMT; uid_tt=107741b6c2fec860896579fe2199c70e; uid_tt_ss=107741b6c2fec860896579fe2199c70e; sid_tt=07310b0ebca08fe6dac8561e07067b23; sessionid=07310b0ebca08fe6dac8561e07067b23; sessionid_ss=07310b0ebca08fe6dac8561e07067b23'
        cookie.split('; ').forEach(v=>{
          document.cookie=v
        })
        this.get(`/douyin/aweme/v1/feed/?type=0&max_cursor=0&min_cursor=-1&count=6&volume=0.7333333333333333&pull_type=2&need_relieve_aweme=0&filter_warn=0&req_from&is_cold_start=0&longitude=0&latitude=0&address_book_access=1&gps_access=1&os_api=22&device_type=MI%209&ssmix=a&manifest_version_code=750&dpi=160&js_sdk_version=1.19.2.0&uuid=863254979922019&app_name=aweme&version_name=7.5.0&ts=1598850797&app_type=normal&ac=wifi&update_version_code=7502&channel=wandoujia_aweme2&_rticket=1598850797942&device_platform=android&iid=4010626588617199&version_code=750&openudid=fcedecb6260322e4&device_id=3131013182011630&resolution=540*960&os_version=5.1.1&language=zh&device_brand=Xiaomi&aid=1128&mcc_mnc=46007`,time.slice(0,10),gorgon).then(res=>{
          this.recommendList = res.aweme_list
        })
      },
      play(url){
        console.log(url)
        url='/video'+url.slice(6)
        this.src=url
      },
      getTime(){
        return Date.now().toString()
      }
    }
  }
  var app = Vue.createApp(options)
  var vm = app.mount("#app")
</script>
</body>
</html>